<template>
  <div>
    <el-carousel :interval="10000" indicator-position="outside">
      <el-carousel-item v-for="item in image" :key="item">
        <el-image style="width: 100%; height: 100%" :src="item" fit="cover"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
  <el-row :gutter="20">
    <el-col :xs="24" :lg="6" :md="6" class="content_body hidden-xs-only">
      <div class="card" style="width: 100%; background: #0f3854; color: white">
        <div class="card-body">
          <h5 class="card-title">
            站点信息&nbsp;&nbsp;&nbsp;
            <span style="font-size: 14px; color: #daf6ff; text-shadow: 0 0 20px #0aafe6">
              {{ formatDate() }}
            </span>
          </h5>
          <router-link to="/home">
            <img src="../../assets/versions.svg" alt="1.0.0" />
          </router-link>
          <div class="card-text">
            <div>开发时间：2021-12-5</div>
            <div>完成时间：待定</div>
            <div class="card-text-build">
              建站信息：
              <el-link href="https://v3.cn.vuejs.org/" targrt="_blank">
                <img src="../../assets/vueVersion.svg" alt="3.0.0" />
              </el-link>
              <el-link href="https://v4.bootcss.com/" targrt="_blank">
                <img src="../../assets/bootstrapVersion.svg" alt="4.6.0" />
              </el-link>
            </div>
            <div>网站空间：<el-link href="https://www.aliyun.com"> 阿里云</el-link></div>
          </div>
          <router-link to="/home" class="card-link"> 首页 </router-link>
          <a href="http://8.142.44.85:2022" target="_blank" class="card-link"> 博客 </a>
          <a href="http://8.142.44.85:2024" target="_blank" class="card-link"> 云盘 </a>
          <router-link to="/update" class="card-link"> 更新日志 </router-link>
        </div>
      </div>
    </el-col>

    <el-col :xs="24" :lg="12" :md="12" class="content_body">
      <div class="card text-center">
        <div class="card-header card_header_ju">
          <div>推荐</div>
          <div>
            <el-tag type="success" effect="dark"> 文章</el-tag>
          </div>
        </div>
        <div class="card-body">
          <div class="flex">
            <el-link :underline="false" href="https://www.baidu.com" target="_blank">
              <el-card shadow="hover">
                <div class="card_content" v-for="item in cardInfo" :key="item">
                  <div class="card_content_one">{{ item.linkName }}</div>
                  <IconPark type="arrow-right" theme="outline" size="20" />
                </div>
              </el-card>
            </el-link>
            <el-card shadow="hover">123</el-card>
          </div>
          <router-link to="/web"> </router-link>
        </div>
        <div class="card-footer text-muted">
          <a href="/#/web" class="btn btn-primary">查看更多</a>
        </div>
      </div>
    </el-col>

    <el-col :xs="24" :lg="6" :md="6" class="content_body">
      <div class="card text-center">
        <div class="card-header card_header_ju">
          <div>推荐</div>
          <div>
            <el-tag type="success" effect="dark"> 文章</el-tag>
          </div>
        </div>
        <div class="card-body"></div>
        <div class="card-footer text-muted">2 days ago</div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :xs="24" :lg="6" :sm="6" class="content_body"> </el-col>
    <el-col :xs="24" :lg="12" :md="12" class="content_body">
      <div class="card text-center">
        <div class="card-header">Featured</div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">
            With supporting text below as a natural lead-in to additional content.
          </p>
          <button href="#" class="btn btn-primary" @click="huoqu">获取数据</button>
        </div>
        <div class="card-footer text-muted">2 days ago</div>
      </div>
    </el-col>
    <el-col :xs="24" :lg="6" :md="6" class="content_body">
      <div class="card text-center">
        <div class="card-header card_header_ju">
          <div>推荐</div>
          <div>
            <el-tag type="success" effect="dark"> 文章</el-tag>
          </div>
        </div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">
            With supporting text below as a natural lead-in to additional content.
          </p>
        </div>
        <div class="card-footer text-muted">2 days ago</div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :xs="24" :lg="6" :sm="6" class="content_body"> </el-col>
    <el-col :xs="24" :lg="12" :md="12" class="content_body">
      <div class="card text-center">
        <div class="card-header">Featured</div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">
            With supporting text below as a natural lead-in to additional content.
          </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
        <div class="card-footer text-muted">2 days ago</div>
      </div>
    </el-col>
    <el-col :xs="24" :lg="6" :md="6"></el-col>
  </el-row>
  <div class="sticky-bottom">
    <Footer />
  </div>

  <el-backtop :bottom="100" />
</template>

<script>
import Footer from "@/components/Footer.vue";
import { IconPark } from "@icon-park/vue-next/es/all";
export default {
  components: {
    Footer,
    IconPark,
  },
  data() {
    return {
      cardInfo: null,
      image: [
        "https://img-qn-3.51miz.com/preview/element/00/01/22/36/E-1223608-87C33490.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/400",
        "https://img-qn-0.51miz.com/preview/element/00/01/22/41/E-1224176-2E8B695A.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/400",
      ],
      date: new Date(),
    };
  },
  methods: {
    setZero(a) {
      //设置小于10的数字在加0
      return a < 10 ? "0" + a : a;
    },
    huoqu() {
      this.$http
        .get("http://127.0.0.1:8000/test")
        .then((response) => (this.cardInfo = response));
    },
    formatDate() {
      //当前时间格式化处理
      var str = "";
      var date = this.date;
      var weekDay = [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      str += this.setZero(date.getFullYear()) + "年"; //获取年份
      str += this.setZero(date.getMonth() + 1) + "月"; //获取月份
      str += this.setZero(date.getDate()) + "日"; //获取日
      str += " " + weekDay[date.getDay()]; //获取星期
      str += " " + this.setZero(date.getHours()) + ":"; //获取时
      str += " " + this.setZero(date.getMinutes()) + ":"; //获取分
      str += this.setZero(date.getSeconds()); //获取秒
      return str;
    },
  },
  mounted() {
    let that = this;
    setInterval(function () {
      that.date = new Date();
    }, 1000);
  },
};
</script>

<style lang="scss" scoped>
.card {
  margin-top: 10px;
  .card_header_ju {
    display: flex;
    justify-content: space-between;
  }
  .content_body {
    display: flex;
    justify-content: center;

    .card-text {
      margin-bottom: 10px;
      & > div {
        margin-top: 5px;
      }
    }
  }
  .card-text-build img {
    margin-left: 2px;
  }
}
.flex {
  display: flex;
  justify-content: space-around;
  .card_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    & .card_content_one {
      margin-right: 50px;
    }
  }
}
</style>
